<template>
  <view class="page">
    <view class="top-bg">
      <image
        :lazy-load="true"
        class="bg"
        :src="imgBaseUrlV1 + 'service-top-bg.png'"
        mode="widthFix"
      ></image>
      <view class="bg-title">
        <text class="chn">服务</text>
        <text class="en">Service</text>
      </view>
    </view>
    <view class="selectors" v-if="false"> </view>
    <view class="service-providers">
      <view
        class="service-provider"
        v-for="(provider, index) in serviceProviders"
        :key="index"
        @click="onClickItem(provider)"
      >
        <image
          :lazy-load="true"
          class="service-provider-cover"
          :src="provider.logo || imgBaseUrlV1 + 'fuwu_pic.png'"
          mode="aspectFill"
        ></image>
        <view class="service-provider-main">
          <view class="title-view">
            <view class="left">
              <text class="title">{{ provider.name }}</text>
              <image
                :lazy-load="true"
                class="medal"
                :src="imgBaseUrlV1 + 'medal.png'"
                mode="widthFix"
              ></image>
            </view>
            <view class="dot-view">
              <image
                :lazy-load="true"
                class="dot"
                :src="imgBaseUrlV1 + 'service-dot.png'"
                mode="widthFix"
              ></image>
            </view>
          </view>
          <view class="second-line">
            <view class="rate-view">
              <image
                :lazy-load="true"
                class="star"
                :src="imgBaseUrlV1 + 'star.png'"
                mode="widthFix"
              ></image>
              <text class="rate">{{ provider.score }}</text>
            </view>
            <text class="order-num">订单 {{ provider.service_num || 0 }}</text>
            <view class="right">
              <!-- <text class="duration">30分钟</text> -->
              <!-- <text class="distance">900m</text> -->
            </view>
          </view>
          <view class="tags" v-if="provider.tags && provider.tags.length !== 0">
            <text
              class="tag"
              v-for="(tag, tagIndex) in provider.tags"
              :key="tagIndex"
              >“{{ tag }}”</text
            >
          </view>
          <view class="location-view">
            <image
              :lazy-load="true"
              class="location-icon"
              :src="imgBaseUrlV1 + 'location-icon.png'"
              mode="widthFix"
            ></image>
            <text class="location">{{ provider.address }}</text>
          </view>
        </view>
      </view>
    </view>

    <image
      :src="urgencyBtn"
      mode="widthFix"
      class="urgency-btn"
      :style="{ top: urgencyTop }"
      v-if="urgencyTop && false"
      @click="onClickUrgency"
    />
    <view class="tips" v-if="last"> 已无更多 </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import { getServiceProviders } from "@/common/api/service-provider.js";
import { getServiceTypeEnum } from "@/common/api/service-project.js";
import { mapState, mapActions } from "vuex";
import { debounce } from "@/utils";
import { imgBaseUrl, imgBaseUrlV0, imgBaseUrlV1 } from "@/common/config";
export default {
  mixins: [viewModule],
  components: {},
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  data() {
    let system = uni.getSystemInfoSync();
    return {
      imgBaseUrl,
      imgBaseUrlV0,
      imgBaseUrlV1,
      windowHeight: system.windowHeight,
      serviceProviders: [],
      typeOptions1: [
        {
          label: "综合",
          value: 0,
        },
        {
          label: "按评分",
          value: 1,
        },
        {
          label: "服务量",
          value: 2,
        },
      ],
      typeOptions2: [],
      order: null,
      urgencyBtn: imgBaseUrl + "urgency_btn.png",
      orderTitle: "排序",
      serviceTypeTitle: "类型",
      urgencyTop: 0,
      last: false,
    };
  },
  async mounted() {
    this.initData();
    this.changeType1(0, false);
    this.onScroll({ scrollTop: 0 });
  },
  methods: {
    onChangePage() {
      if (this.loadingFinish) {
        uni.$emit("hideLoading");
      }
    },
    async pullDownRefresh() {
      await this.initData();
      uni.$emit("stopPullDownRefresh");
    },
    reachBottom() {
      this.getServiceProviders();
    },
    async initData() {
      this.last = false;
      this.loadingFinish = false;
      await Promise.all([
        this.getServiceTypeEnum(),
        this.getServiceProviders(),
      ]);
      this.loadingFinish = true;
      uni.$emit("hideLoading");
    },
    getServiceProviders() {
      this.loadingFinish = false;

      return getServiceProviders({
        sort: this.order,
        ...this.dataForm,
        page: this.page,
      })
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "获取服务列表失败!");
          }
          let data = res.data || {};
          let { list = [], total = 0 } = data;
          list.forEach((i) => {
            i.tags = (i.lable || []).filter((t) => t);
            i.score = parseInt(i.score);
          });
          if (this.page <= 1) {
            this.serviceProviders.length = 0;
          }
          this.serviceProviders = this.serviceProviders.concat(list);
          if (this.serviceProviders.length >= total) {
            this.last = true;
          }
          this.loadingFinish = true;
        })
        .catch(() => {
          this.loadingFinish = true;
          uni.hideLoading();
        });
    },
    getServiceTypeEnum() {
      return getServiceTypeEnum()
        .then((res) => {
          let data = res.data || [];
          this.typeOptions2 = [
            {
              label: "全部",
              value: null,
            },
          ];
          data = data.map((i) => {
            return {
              ...i,
              label: i.service_type,
              value: i.id,
            };
          });
          this.typeOptions2.push(...data);
          console.log(this.typeOptions2, "?this.typeOptions2");
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    async changeType1(e, loading) {
      let item = this.typeOptions1.find((item) => item.value == e);
      this.order = item ? item.value : "";
      this.orderTitle = item ? item.label : "";

      this.page = 1;
      loading &&
        uni.showLoading({
          title: "加载中",
        });
      await this.getServiceProviders();
      uni.hideLoading();
    },
    async changeType2(e) {
      let item = this.typeOptions2.find((item) => item.value == e);
      this.serviceTypeTitle = item ? item.label : "";
      this.dataForm.service_type = item ? item.value : 0;
      this.page = 1;
      uni.showLoading({
        title: "加载中",
      });
      await this.getServiceProviders();
      uni.hideLoading();
    },
    onClickItem(e) {
      this.$Router.push({
        path: "/pages/service-provider-detail/service-provider-detail",
        query: {
          id: e.id,
          name: e.name,
        },
      });
    },
    onScroll(e) {
      let { scrollTop } = e;
      this.urgencyTop = this.windowHeight - 140 + scrollTop + "px";
      // if(){

      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  display: block;
  min-height: calc(100vh - var(--window-top) - 150rpx);
}
.top-bg {
  position: relative;
  background-color: #fff;

  .bg {
    width: 100%;
  }
  .bg-title {
    position: absolute;
    height: 100rpx;
    top: 50%;
    width: 300rpx;
    left: 50%;
    margin-left: -150rpx;
    text-align: center;
    margin-top: -55rpx;

    .chn {
      display: block;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 50rpx;
      color: #fff;
    }
    .en {
      display: block;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #ddd;
    }
  }
}

.service-providers {
  padding: 20rpx 30rpx;
  background-color: #f5f5f5; // 解决selector收回样式问题

  .service-provider {
    display: flex;
    flex-direction: row;
    padding: 20rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }
    .service-provider-cover {
      width: 100rpx;
      height: 100rpx;
    }
    .service-provider-main {
      flex: 1;
      padding-left: 20rpx;

      .title-view {
        display: flex;
        flex-direction: row;

        .left {
          flex: 1;

          .title {
            font-size: 26rpx;
            font-weight: 700;
            color: #434343;
          }
          .medal {
            margin-left: 10rpx;
            width: 20rpx;
            vertical-align: middle;
          }
        }
        .dot-view {
          padding-left: 20rpx;
          .dot {
            width: 30rpx;
            vertical-align: middle;
          }
        }
      }
      .second-line {
        font-size: 22rpx;
        line-height: 50rpx;

        .rate-view {
          display: inline-block;

          .star {
            width: 16rpx;
          }
          .rate {
            padding-left: 5rpx;
            font-weight: 700;
            color: #ffb449;
          }
        }
        .order-num {
          padding-left: 20rpx;
          color: #636363;
        }
        .right {
          float: right;
          color: #636363;

          .duration {
          }
          .distance {
            margin-left: 20rpx;
          }
        }
      }
    }
    .tags {
      .tag {
        font-size: 22rpx;
        background-color: #edf3fb;
        padding: 5rpx;
        border-radius: 50rpx;
        color: #29559e;
        font-weight: 700;
        margin-right: 10rpx;

        &:last-child {
          margin-right: 0;
        }
      }
    }
    .location-view {
      line-height: 60rpx;

      .location-icon {
        width: 20rpx;
        vertical-align: middle;
      }
      .location {
        padding-left: 10rpx;
        font-size: 24rpx;
        color: #434343;
      }
    }
  }
}

.urgency-btn {
  position: absolute;
  display: block;
  right: 20rpx;
  width: 140rpx;
  height: 140rpx;
  transition: top 0.3s;
}
</style>